<!DOCTYPE html>
<html lang="en">
<head>
    <!--下载图片-->
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.9.1.js"></script>
</head>
<body>
<a href="#" id="a" >download</a>
<a href="#" id="a2" >下载图片</a>
</body>
<script>
    /*两种方式一样，只不过写法不同*/

    /*这个只是实现了预览没有实现下载。*/
    $("#a2").click(function (){
        downloadIamge("http://p1.pstatp.com/large/435d000085555bd8de10",'a.png')
    })

    function downloadIamge(imgsrc, name) { //下载图片地址和图片名
        let image = new Image();
        // 解决跨域 Canvas 污染问题
        image.setAttribute("crossOrigin", "anonymous");
        image.src = imgsrc;
        image.onload = function() {
            let canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            let context = canvas.getContext("2d");
            context.drawImage(image, 0, 0, image.width, image.height);
            let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
            let a = document.createElement("a"); // 生成一个a元素
            let event = new MouseEvent("click"); // 创建一个单击事件
            a.download = name || "photo"; // 设置图片名称
            a.href = url; // 将生成的URL设置为a.href属性
            a.dispatchEvent(event); // 触发a的单击事件
        };
    }


    $("#a").click(function () {
        //这是网上的一张图片链接
        var url="http://p1.pstatp.com/large/435d000085555bd8de10";
        getBase64(url)
            .then(function(base64){
                console.log(base64);//处理成功打印在控制台

                var link = document.createElement('a');
                //设置a标签的文字<a>下载</a>
                link.innerHTML = '下载';
                //下载的图片的名称
                link.download = 'picture.png';
                link.id = 'aa';
                //a标签的点击事件
                link.addEventListener('click', function (ev) {
                    link.href = base64;
                }, false);
                //$("#imageExport").html(link);//可以把创建的a标签放到指定的标签中
                //直接下载，文件图片太大会出现问题,出现网络问题，下载出错
                link.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));//兼容火狐
                //link.click();//直接点击也可
            },function(err){
                console.log(err);//打印异常信息
            });
    })

    function getBase64(img){
        function getBase64Image(img,width,height) {//width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小
            var canvas = document.createElement("canvas");
            canvas.width = width ? width : img.width;
            canvas.height = height ? height : img.height;

            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            return canvas.toDataURL();
        }
        var image = new Image();
        image.crossOrigin = '';
        image.src = img;

        var deferred=$.Deferred();
        if(img){
            image.onload =function (){
                deferred.resolve(getBase64Image(image));//将base64传给done上传处理
            }
            return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest']
        }
    }


</script>
</html>